<template>
  <div class="allFenlei">
    <div class="fenleiTitle">
      全部分类<i class="iconfont icon-xia topNavI"></i>
    </div>
    <div class="fenleiBox">
      <div class="yijiBiaoti">
        <ul>
          <li>新鲜水果</li>
          <li>生猛海鲜</li>
          <li>肉类家禽</li>
          <li>蛋奶素食</li>
          <li>田园蔬菜</li>
          <li>零食酒水</li>
          <li>粮油杂货</li>
          <li>礼品卡券</li>
          <li>家居用品</li>
        </ul>
      </div>
      <div class="erjiFenlei" ref="erjiFenlei">
        <ul>
            <li class="clear">
              <h3>应季鲜果</h3>
              <div>
                <span @click="goToType">草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
              </div>
            </li>
            <li class="clear">
              <h3>应季鲜果</h3>
              <div>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
              </div>
            </li>
            <li class="clear">
              <h3>应季鲜果</h3>
              <div>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
              </div>
            </li>
            <li class="clear">
              <h3>应季鲜果</h3>
              <div>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
              </div>
            </li>
            <li class="clear">
              <h3>应季鲜果</h3>
              <div>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
                <span>草莓</span>
              </div>
            </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    goToType(){
      this.$router.push({
        name:"goodstype"
      })
    }
  }
}
</script>
<style scoped>
  .allFenlei{
    position: relative;
  }
  .fenleiBox{
    width: 630px;
    box-sizing: border-box;
    position: absolute;
    z-index: 9;
    display: none;
  }
  .allFenlei:hover .fenleiBox{
    display: block;
  }
  .fenleiBox .yijiBiaoti{
    width: 170px;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
  }
  .yijiBiaoti li:hover{
    background-color: #ebffe7;
  }
  .fenleiBox .erjiFenlei{
    width: 460px;
    height: 100%;
    top: 0;
    left: 170px;
    position: absolute;
    box-sizing: border-box;
    background-color: #ebffe7;
  }
  .erjiFenlei h3{
    width: 125px;
    box-sizing: border-box;
    float: left;
    font-size: 17px;
    font-weight: 500;
    color: #74a86b;
  }
  .erjiFenlei li{
    padding-top: 8px;
  }
  
  .erjiFenlei div{
    box-sizing: border-box;
    width: 313px;
    float: left;
  }
  .erjiFenlei span{
    width: 77px;
    margin-top: 15px;
    float: left;
    line-height: 29px;
    border-right: 1px solid #000;
    font-size: 15px;
    line-height: 15px;
    cursor: pointer;
  }
  .erjiFenlei span:nth-of-type(4n){
    border-right:none;
  }
</style>